<template>
    <div class="article-container">
        <Header />
		<!-- 轮播图 -->
		<el-carousel height="180px" class="banner" :autoplay="bannerList.length > 1" :indicator-position="bannerList.length > 1 ? 'outside' : 'none'" :arrow="bannerList.length > 1 ? 'hover' : 'never'" :loop="bannerList.length > 1">
			<el-carousel-item v-for="item in bannerList" :key="item" style="background-color: #ffffff;display: flex;align-items: center;justify-content: center;">
				<el-image class="banner-img" :src="item.cover" fit="cover" style="width: 100%;height: 100%;padding: 9px;box-sizing: border-box;"/>
			</el-carousel-item>
		</el-carousel>
		<el-main class="article-main" style="padding: 0;">
			<el-row  class="memorial-content" justify="space-between">
				<el-col :xs="24" :sm="5">
					<div class="side-menu">
						<h3 class="side-menu-title" @click="handleTypeClickTitle">{{ pageTitle }}</h3>
						<div class="menu-section" v-for="item in articleCateTypeList" :key="item.id">
							<div class="menu-section-item" :class="{'active': item.id === currentTypeId}" @click="handleTypeClick(item.id, item.name)">{{ item.name }}</div>
							<div class="menu-section-ul">
								<div class="menu-section-ul-item" v-for="itemChild in item.children" :key="itemChild.id">
									<span style="cursor: pointer;" @click="handleTypeClick(itemChild.id, itemChild.name)">{{ itemChild.name }}</span>
									<!-- <router-link :to="'/article/' + itemChild.id">{{ itemChild.name }}</router-link> -->
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="18">
					<ArticleListPage v-if="viewMode === 'list'" :typeTitle="typeTitle" :articleList="articleList" @item-selected="handleItemSelected"/>
					<ArticleDetailPage v-else-if="viewMode === 'detail' && currentItemId !== null"  @back-to-list="handleBackToList" :detailId="currentItemId"/>
				</el-col>
			</el-row>
		</el-main>
		<Footer />
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue';
    import Header from '@/components/header/index.vue';
	import Footer from '@/components/footer/index.vue';
	import ArticleListPage from '@/components/homeArticle/list.vue';
	import ArticleDetailPage from '@/components/homeArticle/detail.vue';
	import { articleCateTypeLists, articleCateList } from '@/api/article';
	import { apiBannerList } from '@/api/banner'
	import { useRoute } from 'vue-router';
	const route = useRoute();
    const articleList = ref([]);
	const articleCateTypeList = ref([]);
	const pagePid = ref<any>();
	const typeTitle = ref('');
	const pageTitle = ref('');
	const getArticleCateTypeList = async () => {
		const res = await articleCateTypeLists({
			pid: pagePid.value
		});
		articleCateTypeList.value = res;
	}
	const init = async () => {
		await getBannerList(Number(route.query.pid))
		await getArticleCateTypeList();
		await getArticleCateList(pagePid.value);
	}
	const handleTypeClick = async (id: any, name?: string) => {
		typeTitle.value = name?name: '';
		await getArticleCateList(id);
	}
	const getArticleCateList = async (id: any) => {
		const data = await articleCateList({cid: id});
		articleList.value = data.lists;
	}
	const handleTypeClickTitle = async () => {
		const data = await articleCateList({cid: route.query.pid});
		articleList.value = data.lists;
	}
	
	onMounted(() => {
		if(route.query.pid){
			pagePid.value = route.query.pid
			if(pagePid.value == 1){
				typeTitle.value = '民俗文化';
				pageTitle.value = '民俗文化';
			} else if(pagePid.value == 2){
				typeTitle.value = '生命文化';
				pageTitle.value = '生命文化';
			} else if(pagePid.value == 3){
				typeTitle.value = '今生永恒资讯';
				pageTitle.value = '今生永恒资讯';
			} else if(pagePid.value == 4){
				typeTitle.value = '帮助中心';
				pageTitle.value = '帮助中心';
			} else if(pagePid.value == 5){
				typeTitle.value = '关于今生永恒网';
				pageTitle.value = '关于今生永恒网';
			}
		}
		if(route.query.id != '' && route.query.id != undefined){
			currentItemId.value = route.query.id as number | string
			viewMode.value = 'detail'; // 切换到详情视图
		}
		init();
		// getArticleCateTypeList();
	})
	watch(()=> route.query.pid, () => {
		pagePid.value = route.query.pid;
		if(route.query.pid){
			pagePid.value = route.query.pid
			if(pagePid.value == 1){
				typeTitle.value = '民俗文化';
				pageTitle.value = '民俗文化';
			} else if(pagePid.value == 2){
				typeTitle.value = '生命文化';
				pageTitle.value = '生命文化';
			} else if(pagePid.value == 3){
				typeTitle.value = '今生永恒资讯';
				pageTitle.value = '今生永恒资讯';
			} else if(pagePid.value == 4){
				typeTitle.value = '帮助中心';
				pageTitle.value = '帮助中心';
			} else if(pagePid.value == 4){
				typeTitle.value = '关于今生永恒网';
				pageTitle.value = '关于今生永恒网';
			}
		}
		init();
	})

	// 父子组件业务

	type ViewMode = 'list' | 'detail';
	// --- 组件状态 ---
	const currentCategory = ref<string | null>(null); // 当前选中的分类 ID
	const currentItemId = ref<number | string | null>(null); // 当前选中的项目 ID (用于详情页)
	const viewMode = ref<ViewMode>('list'); // 当前视图状态 ('list' 或 'detail')
	const handleItemSelected = (itemId: number | string) => {
		console.log('Layout 收到项目:', itemId);
		currentItemId.value = itemId;
		viewMode.value = 'detail'; // 切换到详情视图
	}
	const handleBackToList = () => {
		console.log('Layout 收到 back-to-list 事件');
		currentItemId.value = null; // 清空选中的项目
		viewMode.value = 'list'; // 切换回列表视图
	}

	const bannerList = ref([]);
	const getBannerList = async (type: number | string) => {
		console.log(type)
		const data = await apiBannerList({type: type});
		bannerList.value = data
	}
</script>

<style scoped lang="scss">
    .article-main{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    .banner {
        width: 100%;
        height: 100%;
		max-width: 1200px;
		margin: 40px auto;
    }

    .banner-item {
        width: 100%;
        max-width: 1200px;
        height: 100%;
        background-color: #d3dce6;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24px;
    }
    
    .memorial-wrapper {
		display: flex;
		justify-content: center;
		padding: 20px;
		box-sizing: border-box;
	}

	.memorial-content {
		max-width: 1200px;
		width: 100%;
	}

	.side-menu {
		background-color: #f9f7f3;
		//   padding: 16px;
		border: 1px solid #ddd;
	}
	.menu-section{
		padding: 16px;
	}
	.menu-section .active{
		color: #f00;
	}
	.menu-section-item{
		padding: 15px 20px 2px 10px;
		font-size: 14px;
		cursor: pointer;
	}
	.menu-section-ul {
		list-style: none;
		padding: 0;
		margin: 0;
		padding-left: 10px;
		display: flex;
		//   flex-direction: row;
		flex-wrap: wrap;
		//   gap: 5px;
	}
	.menu-section-ul-item{
		font-size: 14px;
		padding: 15px 20px 2px 10px;
	}
	

	.side-menu-title{
		width: 100%;
		height: 34px;
		background: #EFDBA7;
		display: flex;
		align-items: center;
		padding-left: 20px;
		box-sizing: border-box;
		font-size: 17px;
		font-weight: 500;
		color: #AB5844;
		cursor: pointer;
	}
</style>
